<%--<%@ page contentType="text/html;charset=UTF-8" language="java" %>--%>
<%--<!DOCTYPE html>--%>
<%--<html lang="en">--%>
<%--<head>--%>
<%--    <meta charset="UTF-8">--%>
<%--    <meta http-equiv="X-UA-Compatible" content="IE=edge">--%>
<%--    <meta name="viewport" content="width=device-width, initial-scale=1">--%>

<%--    <title>我的收藏</title>--%>

<%--</head>--%>
<%--<body>--%>
<%--<jsp:include page="/incloud/header.jsp" />--%>

<%--<div class="d-flex align-items-stretch">--%>
<%--    <!-- Sidebar Navigation-->--%>
<%--    <jsp:include page="/incloud/sidebar.jsp" />--%>
<%--    <!-- Sidebar Navigation end-->--%>
<%--    <div class="page-content">--%>
<%--        <div class="page-header">--%>
<%--            <div class="container-fluid">--%>
<%--                <h2 class="h5 no-margin-bottom">我收藏的文章</h2>--%>
<%--            </div>--%>
<%--        </div>--%>

<%--        <section class="no-padding-bottom">--%>

<%--            <div class="list-group myList">--%>
<%--                <!--搜索文章的条件-->--%>
<%--                <div class="myTitle">--%>
<%--                    <form class="form-inline">--%>
<%--                        <div class="form-group">--%>
<%--                            <label for="inlineFormInput" class="sr-only">Name</label>--%>
<%--                            <input id="inlineFormInput" type="text" placeholder="按标题名字查找" class="mr-sm-3 form-control">--%>
<%--                        </div>--%>
<%--                        <div class="form-group">--%>
<%--                            <input type="submit" value="查询" class="btn btn-primary">--%>
<%--                        </div>--%>
<%--                    </form>--%>

<%--                    <!--<input id = "addArt" type="submit" value="发布文章" class="btn btn-primary">-->--%>

<%--                </div>--%>

<%--                <ul>--%>
<%--                    <li class="list-group-item">--%>
<%--                        <a href="article_detail.jsp">如何做一名合格的Java工程师？</a>--%>
<%--                        <p class="h6"><strong>作者：</strong>小标</p>--%>
<%--                        <p class="h6"><strong>时间：</strong>2019-10-30 09:52:12</p>--%>
<%--                        <p style="white-space:nowrap;overflow:hidden;text-overflow: ellipsis">做一名Java工程师需要付出非常大的努力，做一名Java工程师需要付出非常大的努力，做一名Java工程师需要付出非常大的努力 做一名Java工程师需要付出非常大的努力，做一名Java工程师需要付出非常大的努力，做一名Java工程师需要付出非常大的努力 做一名Java工程师需要付出非常大的努力，做一名Java工程师需要付出非常大的努力，做一名Java工程师需要付出非常大的努力 做一名Java工程师需要付出非常大的努力，做一名Java工程师需要付出非常大的努力，做一名Java工程师需要付出非常大的努力 做一名工程师</p>--%>
<%--                    </li>--%>

<%--                    <li class="list-group-item">--%>
<%--                        <a href="article_detail.jsp">如何做一名合格的Java工程师？</a>--%>
<%--                        <p class="h6"><strong>作者：</strong>小标</p>--%>
<%--                        <p class="h6"><strong>时间：</strong>2019-10-30 09:52:12</p>--%>
<%--                        <p style="white-space:nowrap;overflow:hidden;text-overflow: ellipsis">做一名Java工程师需要付出非常大的努力，做一名Java工程师需要付出非常大的努力，做一名Java工程师需要付出非常大的努力 做一名Java工程师需要付出非常大的努力，做一名Java工程师需要付出非常大的努力，做一名Java工程师需要付出非常大的努力 做一名Java工程师需要付出非常大的努力，做一名Java工程师需要付出非常大的努力，做一名Java工程师需要付出非常大的努力 做一名Java工程师需要付出非常大的努力，做一名Java工程师需要付出非常大的努力，做一名Java工程师需要付出非常大的努力 做一名工程师</p>--%>
<%--                    </li>--%>

<%--                    <li class="list-group-item">--%>
<%--                        <a href="article_detail.jsp">如何做一名合格的Java工程师？</a>--%>
<%--                        <p class="h6"><strong>作者：</strong>小标</p>--%>
<%--                        <p class="h6"><strong>时间：</strong>2019-10-30 09:52:12</p>--%>
<%--                        <p style="white-space:nowrap;overflow:hidden;text-overflow: ellipsis">做一名Java工程师需要付出非常大的努力，做一名Java工程师需要付出非常大的努力，做一名Java工程师需要付出非常大的努力 做一名Java工程师需要付出非常大的努力，做一名Java工程师需要付出非常大的努力，做一名Java工程师需要付出非常大的努力 做一名Java工程师需要付出非常大的努力，做一名Java工程师需要付出非常大的努力，做一名Java工程师需要付出非常大的努力 做一名Java工程师需要付出非常大的努力，做一名Java工程师需要付出非常大的努力，做一名Java工程师需要付出非常大的努力 做一名工程师</p>--%>
<%--                    </li>--%>

<%--                </ul>--%>

<%--                <nav class="text-center" aria-label="Page navigation">--%>
<%--                    <ul class="pagination">--%>
<%--                        <li>--%>
<%--                            <a href="#" aria-label="Previous">--%>
<%--                                <span aria-hidden="true">&laquo;</span>--%>
<%--                            </a>--%>
<%--                        </li>--%>
<%--                        <li><a href="#">1</a></li>--%>
<%--                        <li><a href="#">2</a></li>--%>
<%--                        <li><a href="#">3</a></li>--%>
<%--                        <li><a href="#">4</a></li>--%>
<%--                        <li><a href="#">5</a></li>--%>
<%--                        <li>--%>
<%--                            <a href="#" aria-label="Next">--%>
<%--                                <span aria-hidden="true">&raquo;</span>--%>
<%--                            </a>--%>
<%--                        </li>--%>
<%--                    </ul>--%>
<%--                </nav>--%>
<%--            </div>--%>
<%--        </section>--%>

<%--        <jsp:include page="/incloud/footer.jsp" />--%>
<%--    </div>--%>
<%--</div>--%>

<%--</body>--%>
<%--</html>--%>


<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>我的收藏</title>

</head>
<body>
<jsp:include page="/incloud/header.jsp"/>

<div class="d-flex align-items-stretch">

    <!-- Sidebar Navigation-->
    <jsp:include page="/incloud/sidebar.jsp"/>

    <!-- Sidebar Navigation end-->
    <div class="page-content">
        <div class="page-header">
            <div class="container-fluid">
                <h2 class="h5 no-margin-bottom">我收藏的文章</h2>
            </div>
        </div>

        <section class="no-padding-bottom">

            <div class="list-group myList">
                <!--搜索文章的条件-->
                <div class="myTitle">
                    <form class="form-inline">
                        <div class="form-group">
                            <label for="inlineFormInput" class="sr-only">Name</label>
                            <input id="inlineFormInput" type="text" placeholder="按标题名字查找"
                                   class="mr-sm-3 form-control">
                        </div>
                        <div class="form-group">
                            <input type="submit" id="search" value="查询" class="btn btn-primary">
                        </div>
                    </form>

                </div>

                <ul id="articleList">

                </ul>

                <nav class="text-center" aria-label="Page navigation">
                    <ul class="pagination">
                        <li>
                            <a href="#" aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                        <li><a href="#">1</a></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                        <li><a href="#">4</a></li>
                        <li><a href="#">5</a></li>
                        <li>
                            <a href="#" aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
        </section>


        <jsp:include page="/incloud/footer.jsp"/>
    </div>
</div>

</body>
</html>
<script type="text/javascript">

    $("#articleList").on("click", ".article-link", function () {
        event.preventDefault();
        window.location.href = "/html/article_detail.jsp?id=" + $(this).data("id")
    });

    $("#search").click(function () {
        event.preventDefault();
        var title = $("#inlineFormInput").val();
        getArticleList(1, title)
    });

    getArticleList(1, "")

    function getArticleList(page, title) {
        $.ajax({
            url: "/article/getFavoriteList",
            type: "post",
            dataType: "json",
            data: {
                page: page,
                title: title,
            },
            success: function (res) {
                if (res.code == 200) {
                    var html = "";
                    for (var i = 0; i < res.data.records.length; i++) {
                        html += '<li class="list-group-item">' +
                            '<div style="float: right;">' +
                            '<span><strong>收藏数：</strong>' + res.data.records[i].favoriteCount + '</span>' +
                            '<span>&nbsp;</span>' +
                            '<span>&nbsp;</span>' +
                            '<span>&nbsp;</span>' +
                            '<span><strong>浏览数：</strong>' + res.data.records[i].browseCount + '</span>' +
                            '</div>' +
                            '<a href="article_detail.jsp" class="article-link"  data-id=' + res.data.records[i].id + '  >' + res.data.records[i].title + '</a>' +
                            '<p class="h6"><strong>作者：</strong>' + res.data.records[i].publishRealName + '</p>' +
                            '<p class="h6"><strong>时间：</strong>' + res.data.records[i].publishDate + '</p>' +
                            '<p style="white-space:nowrap;overflow:hidden;text-overflow: ellipsis">' + res.data.records[i].content + '</p>' +
                            '</li>'
                    }
                    $("#articleList").html(html)
                    updatePagination(res.data.page, res.data.totalPage)
                }
            }
        })
    }

    function updatePagination(currentPage, totalPages) {
        console.log(currentPage, totalPages);

        var paginationHtml = "";
        paginationHtml += "<li class='" + (currentPage === 1 ? "disabled" : "") + "'>";
        paginationHtml += "<a href='#' aria-label='Previous' data-page='" + (currentPage - 1) + "'>";
        paginationHtml += "<span aria-hidden='true'>&laquo;</span>";
        paginationHtml += "</a>";
        paginationHtml += "</li>";

        for (var i = 1; i <= totalPages; i++) {
            paginationHtml += "<li class='" + (i === currentPage ? "active" : "") + "'>";
            paginationHtml += "<a href='#' data-page='" + i + "'>" + i + "</a>";
            paginationHtml += "</li>";
        }

        paginationHtml += "<li class='" + (currentPage === totalPages ? "disabled" : "") + "'>";
        paginationHtml += "<a href='#' aria-label='Next' data-page='" + (currentPage + 1) + "'>";
        paginationHtml += "<span aria-hidden='true'>&raquo;</span>";
        paginationHtml += "</a>";
        paginationHtml += "</li>";


        $(".pagination").html(paginationHtml);

        // 使用事件委托绑定分页按钮的点击事件
        $(".pagination").off("click", "a").on("click", "a", function (event) {
            event.preventDefault();
            var page = $(this).data("page");
            var currentPage = parseInt($(".pagination .active a").data("page"), 10); // 获取当前页码

            // 如果点击的是当前页按钮，直接返回
            if (page === currentPage) {
                return;
            }

            // 确保 page 是有效的数字
            if (page && !isNaN(page)) {
                getArticleList(page, $("#inlineFormInput").val());
            }
        });
    }

    $(document).on("click", "#prevPage", function () {
        var currentPage = parseInt($(".pagination").data("current-page"));
        getArticleList(currentPage - 1, $("#inlineFormInput").val());
    });

    $(document).on("click", "#nextPage", function () {
        var currentPage = parseInt($(".pagination").data("current-page"));
        getArticleList(currentPage + 1, $("#inlineFormInput").val());
    });

</script>
<style>
    .disabled {
        pointer-events: none;
    }
</style>